<template>
    <div class="user-box">
        <s-header :name="'手机号'"></s-header>
        <div>
            <p class="phone">当前绑定手机号</p>
            <p class="phone_font">{{mobile}}</p>
            <div class="phone_p">
                <van-field
                        v-model="code"
                        center
                        clearable
                        placeholder="请输入短信验证码"
                        >
                    <template #button>
                        <van-button size="small" color="#1baeae" type="primary" round @click="send_sms">{{sms_interval}}</van-button>
                    </template>
                </van-field>
            </div>
            <van-button class="save-btn" color="#1baeae" type="info" @click="goTo('updatePhone')" round >修改手机号</van-button>
            <van-button class="back" color="#CCCCCC" type="default" @click="goBack" round >返回</van-button>
        </div>
    </div>
</template>

<script>
import sHeader from '@/components/SimpleHeader'
import { NumberKeyboard } from 'vant';
import { Tabs, Toast } from 'vant'
export default {
  components: {
    sHeader
  },
  data(){
    return {
        signature:'',
        id:'',
        mobile:'',
        code:'',
        is_send:false,
        sms_interval:'获取验证码',
        show:false
    }
  },
  created(
  ){
    this.id=this.$cookies.get('id')
    this.mobile = this.$cookies.get('mobile')
    this.mobile = this.mobile.substr(0, 3) + '******' + this.mobile.substr(9)
    if(this.mobile){
      this.is_send=true
    }
  },
  methods:{
    send_sms() {
      let mobile = this.$cookies.get('mobile')
      if (!this.is_send) return;
      this.is_send = false;
      let sms_interval_time = 60;
      this.sms_interval = "发送中...";
      let timer = setInterval(() => {
        if (sms_interval_time <= 1) {
          clearInterval(timer);
          this.sms_interval = "获取验证码";
          this.is_send = true; // 重新回复点击发送功能的条件
        } else {
          sms_interval_time -= 1;
          this.sms_interval = `${sms_interval_time}秒后再发`;
        }
      }, 1000);
      this.$axios.get(this.$settings.BASE_URL + 'userinfo/user/send_sms/?mobile=' + mobile).then(res => {
        if (res.code !== 100) {
          Toast({message:res.msg, position: 'bottom',})
        }
      })
    },
    goTo(r){
        if(this.code){
            let mobile = this.$cookies.get('mobile')
            this.$axios.post(this.$settings.BASE_URL + 'userinfo/phone/is_sms/' , {
              mobile:mobile,code:this.code
            }).then(res => {
           if(res.code==100){
                this.$router.push({ path: r })
           }else{
            Toast({message:res.msg, position: 'bottom',})
           }
        })
        }else{
            Toast({message:'请输入验证码', position: 'bottom',})
        }
        },
    goBack(){
        this.$router.go(-1)
    },
  }
}
</script>


<style lang="less" scoped>
  @import '../common/style/mixin';
  .user-box {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 10000;
      .fj();
      .wh(100%, 44px);
      line-height: 44px;
      padding: 0 10px;
      .boxSizing();
      color: #252525;
      background: #fff;
      border-bottom: 1px solid #dcdcdc;
      .phone{
        font-size: 14px;
        margin-top:80px;
        margin-left: 130px;
      }
      .phone_font{
        margin-left: 120px;
        font-size: 24px;
      }

    .save-btn {
      width: 80%;
      margin-left: 50px;
      margin-top:30px
    }
    .back{
        width: 80%;
        margin-left: 50px;
        margin-top:15px

    }
    .phone_p{
        margin-left:40px
    }
    }

</style>
